<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.class样式的绑定</title>
		<style>
			*{
				margin-top: 10px;
			}
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}

			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px solid black;
				background-color: gray;
			}
			.normal{
				border: 4px solid blue;
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			class样式
				:class="xxx" xxx可以是：字符串、对象、数组。
						(1).字符串写法适用于：类名不确定，要动态获取。
						(2).对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不知道：用不用。
						(3).数组写法适用于：要绑定多个样式，个数不确定，名字也不确定，。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>欢迎来到{{school}}</h1>
			<!-- 动态绑定class样式，字符串写法，适用于：类名不确定，个数确定 -->
			<div class="basic" :class="mood" @click="changeMood">你好啊！</div>

			<!-- 动态绑定class样式，数组写法，适用于:类名不确定、个数也不确定 -->
			<div class="basic" :class="classArr">
				你好啊！
				<input type="text" v-model="cname" placeholder="请属于一个class类名">
				<button @click="add">添加</button>
			</div>

			<!-- 动态绑定class样式，对象写法，适用于:类名确定、个数确定、但不知道：用不用 -->
			<div class="basic" :class="classObj">
				你好啊
				<button @click="classObj.atguigu1 = !classObj.atguigu1">样式1</button>
				<button @click="classObj.atguigu2 = !classObj.atguigu2">样式2</button>
				<button @click="classObj.atguigu3 = !classObj.atguigu3">样式3</button>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				school:'尚硅谷',
				mood:'happy',
				cname:'',
				classArr:[],
				classObj:{
					atguigu1:false,
					atguigu2:false,
					atguigu3:false
				}
			},
			methods: {
				changeMood(){
					//定义一个心情的“容器”
					const arr = ['happy','sad','normal']
					//随机生成0、1、2
					const index = Math.floor(Math.random()*3)
					console.log(index)
					//更新mood
					this.mood = arr[index]
				},
				add(){
					if(this.classArr.indexOf(this.cname) !==-1 ) return
					this.classArr.push(this.cname)
				}
			}
		})
	</script>
</html>